<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>elementui-2.0入门</title>
    <style>

    </style>
</head>
<body>
<!--
    本地引入Vue、引入elementui样式、引入elementui组件库
    elementui是基于Vue的框架,所以要引入vue.js
    axios网络请求框架
-->
<script src="js/vue-2.6.14.js"></script>
<script src="element-ui2.15.7/lib/index.js"></script>
<link rel="stylesheet" href="element-ui2.15.7/lib/theme-chalk/index.css">
<script src="js/axios-0.25.0.js"></script>

<!-- 通过CDN引入Vue、引入样式、引入组件库(vue的CDN地址不太好使了,只能先用本地的vue.js) -->
<!--<script src="https://unpkg.com/vue/dist/vue.js"></script>-->
<!--<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">-->
<!--<script src="https://unpkg.com/element-ui/lib/index.js"></script>-->

<div id="app">

    <!--  顶部查询条件  -->
    <el-form :inline="true" class="demo-form-inline">

        <el-form-item label="当前状态">
            <el-select v-model="form.region" placeholder="当前状态">
                <el-option label="启用" value="shanghai"></el-option>
                <el-option label="禁用" value="beijing"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="企业名称">
            <el-input v-model="form.name" placeholder="企业名称"></el-input>
        </el-form-item>
        <el-form-item label="品牌名称">
            <el-input v-model="form.name" placeholder="品牌名称"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
    </el-form>

    <!-- 批量删除和新增按钮 -->
    <el-row>
        <el-button type="danger" plain>批量删除</el-button>
        <el-button type="primary" plain @click="dialogVisible = true">新增</el-button>
    </el-row>

    <!--弹框-->
    <el-dialog
            title="提示"
            :visible.sync="dialogVisible"
            width="30%"
            :before-close="handleClose">

        <el-form ref="form" :model="brand" label-width="80px">
            <el-form-item label="品牌名称">
                <el-input v-model="brand.brand_name"></el-input>
            </el-form-item>

            <el-form-item label="企业名称">
                <el-input v-model="brand.company_name"></el-input>
            </el-form-item>

            <el-form-item label="排序">
                <el-input v-model="brand.ordered"></el-input>
            </el-form-item>

            <el-form-item label="备注">
                <el-input type="textarea" v-model="brand.description"></el-input>
            </el-form-item>

            <el-form-item label="状态">
                <el-switch v-model="brand.status"
                           active-value="1"
                           inactive-value="0"
                ></el-switch>
            </el-form-item>


            <el-form-item>
                <el-button type="primary" @click="addBrand">提交</el-button>
                <el-button @click="dialogVisible = false">取消</el-button>
            </el-form-item>
        </el-form>


    </el-dialog>

    <!--table列表数据-->
    <el-table
            ref="multipleTable"
            :data="tableData"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChange">
        <!--多选操作-->
        <el-table-column
                type="selection"
                align="center"
                width="55">
        </el-table-column>
        <!--序号-->
        <el-table-column
                label="序号"
                type="index"
                align="center"
                width="50">
        </el-table-column>
        <!--品牌名称-->
        <el-table-column
                prop="brand_name"
                label="品牌名称"
                align="center"
        >
            <!--            <template slot-scope="scope">{{ scope.row.date }}</template>-->
        </el-table-column>
        <!--企业名称-->
        <el-table-column
                prop="company_name"
                label="企业名称"
                align="center"
                show-overflow-tooltip
        >
        </el-table-column>
        <!--排序-->
        <el-table-column
                prop="ordered"
                label="排序"
                align="center"
        >
        </el-table-column>
        <el-table-column
                prop="status"
                label="当前状态"
                align="center"
        >
        </el-table-column>
        <el-table-column
                label="操作"
                align="center"
        >
            <el-row>
                <el-button type="primary">修改</el-button>
                <el-button type="danger">删除</el-button>
            </el-row>
        </el-table-column>
    </el-table>

    <!--底部分页-->
    <div class="block" style="margin-top: 20px">
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage4"
                :page-sizes="[5, 10, 15, 20]"
                :page-size="100"
                layout="total, sizes, prev, pager, next, jumper"
                :total="400">
        </el-pagination>
    </div>

</div>


<script>
    new Vue({
        el: "#app",
        data() {
            return {
                // 品牌模型数据
                brand: {
                    status: '',
                    brand_name: '',
                    company_name: '',
                    id: "",
                    ordered: "",
                    description: ""
                },
                dialogVisible: false,
                currentPage4: 4,

                form: {
                    name: '',
                    region: '',
                    date1: '',
                    date2: '',
                    delivery: false,
                    type: [],
                    resource: '',
                    desc: ''
                },
                tableData: [{
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-08',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-06',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-07',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }],
                multipleSelection: [],


            }
        },
        methods: {
            selectAll() {
                let _this = this;
                //当页面加载完成后,发送异步请求,获取数据
                axios({
                    method: 'post',
                    url: 'http://localhost:8080/pro/selectAllServlet',
                }).then(function (resp) {
                    _this.tableData = resp.data;
                    console.log(_this.tableData);
                })
            },
            // 添加数据
            addBrand() {
                console.log(this.brand);
                var _this = this;

                // 发送ajax请求，添加数据
                axios({
                    method: "post",
                    url: "http://localhost:8080/pro/addServlet",
                    data: _this.brand
                }).then(function (resp) {
                    if (resp.data == "success") {
                        //添加成功

                        //关闭窗口
                        _this.dialogVisible = false;

                        // 重新查询数据
                        _this.selectAll();
                        // 弹出消息提示
                        _this.$message({
                            message: '恭喜你，添加成功',
                            type: 'success'
                        });

                    }
                })
            }
            ,
            handleClose(done) {
                console.log("点击了关闭弹框");
                done(); //关闭弹框
                // 确认弹框
                // this.$confirm('确认关闭？')
                //     .then(_ => {
                //         console.log("确认")
                //         done();
                //     })
                //     .catch(_ => {
                //         console.log("取消")
                //     });
            }
            ,
            onSubmit() {
                console.log('submit!');
            }
            ,
            toggleSelection(rows) {
                if (rows) {
                    rows.forEach(row => {
                        this.$refs.multipleTable.toggleRowSelection(row);
                    });
                } else {
                    this.$refs.multipleTable.clearSelection();
                }
            }
            ,
            handleSelectionChange(val) {
                this.multipleSelection = val;
            }
            ,
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            }
            ,
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
            }
        },
        mounted() {
            console.log('页面加载完了,servlet--->')
            this.selectAll();

        }
    })
</script>

</body>
</html>